<template>
  <div class="gn_companymesg">
    <div class="company_details">
      <div class="mesg_tit">
        通话信息
        <!-- <span>ID:{{id}}</span> -->
      </div>
      <div class="company_mesg clearfix" >
        <div class="company_list fl clearfix" >
          <span class="company_listtit fl">主叫号码：</span>
          <div class="company_listinput" >
            {{phoneSrc}}
          </div>
        </div>

        <div class="company_list fl clearfix">
          <span class="company_listtit fl">被叫号码：</span>
          <div class="company_listinput">
            {{phoneDst}}
          </div>
        </div>

        <div class="company_list fl clearfix">
          <span class="company_listtit fl">通话开始：</span>
          <div class="company_listinput">
            {{calldate}}
          </div>
        </div>

        <div class="company_list fl clearfix">
          <span class="company_listtit fl">通话时长：</span>
          <div class="company_listinput" >
            {{duration}}
          </div>
        </div>
        <!-- <div class="company_list fl clearfix">
          <span class="company_listtit fl">通话结束：</span>
          <div class="company_listinput" >
            {{enddate}}
          </div>
        </div> -->

        <div class="company_list fl clearfix">
          <span class="company_listtit fl">通话类型：</span>
          <div class="company_listinput">
            {{phoneInout}}
          </div>
        </div>

        

        <div class="company_list fl clearfix">
          <span class="company_listtit fl">服务客服：</span>
          <div class="company_listinput">
            {{phoneStaff}}
          </div>
        </div>

        <div class="company_list fl clearfix">
          <span class="company_listtit fl">客户姓名：</span>
          <div class="company_listinput" >
            {{customerName}}
            <a @click="onCusotmerLook">查看客户详情</a>
          </div>
        </div>

        <div class="company_list company100 clearfix">
          <span class="company_listtit fl">通话录音：</span>
          <div class="company_listinput">
             <audio :src="srcfile+phoneFile" style="height:55px;width:400px"  controls="controls"></audio>
          </div>
        </div>




      </div>
    </div>
    <div class="order_btnbox">
      <el-button type="success" @click="onCallOut">回拨</el-button>
    </div>
   

  </div>
</template>

<script>
import {
  getCustomerByQuery,
  pxbPhoneCallback} from '@/api'
  import bus from '@/api/bus'
  export default{
    data(){
      return{
        srcfile:'http://192.168.1.180/record/',
        ishover:false,
        editPassVisible: false,
        editMesgVisible: false,
        phoneDst:'',//获取的列表页信息
        phoneSrc:'',
        calldate:'',
        phoneStaff:'',
        phoneFile:'',
        phoneInout:'',
        duration:'' ,
        enddate:'',
        customerName:'',
        userId: '' // 用户id
      }
    },
    created(){
      this.phoneDst = this.$route.query.dst
      this.phoneSrc = this.$route.query.src
      this.calldate = this.$route.query.calldate
      this.phoneStaff = this.$route.query.staff
      this.phoneFile = this.$route.query.file
      this.phoneInout = this.$route.query.type
      this.duration = this.$route.query.duration
      let customerparams ={
        query: this.phoneDst,
        page:'',
        size:''
      }
      //console.log(this.$route.query.dst)
      this.customerByQuery(customerparams);
    },
    methods:{
      customerByQuery (params) {
        getCustomerByQuery (params).then(res => {
         // console.log(res)
          let code = res.data.code;
          if(code == 0){
            let data = res.data.data.list
           // console.log(data)
            data.map((item, index) => {
              this.customerName = item.name
              this.userId = item.id
            })
          }else if(code == 1){
            this.$message({
              message: res.data.msg
            })
          }
        })
      },
      phoneCallback (params) { //调入呼出电话接口(立即回拨)
        pxbPhoneCallback (params).then(res => {
          let code = res.data.code;
          if(code == 0){
            this.$router.push({ //调取成功跳转到弹屏页面,传入呼出号码
              path: '/home/oncall',
              query: {
                callPhone: this.phoneDst
              }
            })
            bus.$emit('hideEvent', true)
          }else if(code == 1){
            this.$message({
              message: '分机号错误!'
            })
          }else if(code == 2){
            this.$message({
              message: '被叫号错误!'
            })
          }
          else if(code == 3){
            this.$message({
              message: '呼叫失败!'
            })
          }
          
        });
      },
      onCallOut(index,row){ //点击回拨电话调用接口phoneCallback拨打出电话
        let params = {
          device: sessionStorage.getItem('device'),
          called: this.phoneDst
        }
        this.phoneCallback (params)
      },
      onCusotmerLook(){
        if(this.customerName !==''){ //有客户姓名的进行查看客户详情
          this.$router.push({
            path: '/home/customerdetails',
            query: {
              id: this.userId
            }
          })
        }else{
          this.$message({//内呼的电话没有客户内容,不跳转
            message: '暂无相关内容'
          })
        }
      }
    }
  };
</script>

<style scoped>

.company_listinput{display:flex;overflow:hidden;line-height:40px;}
.company_listinput .el-input{width:280px;}
.company_list{min-width:50%;margin-bottom:20px;}
.company_listtit{width:100px;line-height:40px;text-align:right;}
.company_editbtn{margin-left:5px;}
.company_phonetips{color:#de2b39;font-size:12px;line-height:40px;}
.company_inpmesg{line-height:40px;color:#333;}
.el-input__inner{color:#333;}
.company_callnum{color:#666;}
.company100{width:100%;clear:both;}
.company100 .el-input{width:60%;}
.edticompany_btn{float:right;}
.order_btnbox{padding:15px 0;text-align:center;}
.company_listinput a{color:#01d39a;padding-left:10px;}
</style>